import { Box, Grid, GridItem, Show } from "@chakra-ui/react";
import FeatureList, { Feature } from "./feature/FeatureList";
import { useState } from "react";
import Display from "./Display";

const App = () => {
  const [feature, setFeature] = useState({} as Feature);

  return (
    <Grid
      templateAreas={{
        base: `"nav" "main"`,
        lg: `"nav nav" "aside main"`,
      }}
      templateColumns={{
        base: "1fr",
        lg: "150px 1fr",
      }}
    >
      <GridItem area="nav">
        {/* <NavBar
          onSearch={(searchText) => setGameQuery({ ...gameQuery, searchText })}
        /> */}
      </GridItem>
      <Show above="lg">
        <GridItem area="aside" paddingX={5}>
          <FeatureList
            onSelectFeature={(feature) => {
              setFeature(feature);
            }}
            selected={feature}
          ></FeatureList>
        </GridItem>
      </Show>
      <GridItem area="main">
        <Box paddingLeft={2}>
          <Display feature={feature} />
        </Box>
      </GridItem>
    </Grid>
  );
};

export default App;
